<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            #app {
                position: relative;
            }

            h6 {
                margin: 8px 0 0;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }

            h6::after {
                content: ':';
            }

            code {
                font-family: 'Roboto Mono', Monaco, courier, monospace;
                color: #e96900;
                padding: 3px 5px;
                margin: 0 2px;
                border-radius: 2px;
                white-space: nowrap;
                font-size: 0.8em;
                background-color: #f8f8f8;
            }

            .flex {
                display: flex;
            }

            .flex-1of2 {
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>计算属性</h6>
            {{message}} <=> {{reverseMessage}}
            <h6>watch vs computed</h6>
            <div class="flex">
                <fieldset class="flex-1of2">
                    <legend>watch</legend>
                    <label>FirstName: <input type="text" v-model="firstName" placeholder="firstName"></label><br>
                    <label>LastName: <input type="text" v-model="lastName" placeholder="lastName"></label><br>
                    FullName: {{fullName}}
                </fieldset>
                <fieldset class="flex-1of2">
                    <legend>computed</legend>
                    <label>FirstName: <input type="text" v-model="firstName1" placeholder="firstName"></label><br>
                    <label>LastName: <input type="text" v-model="lastName1" placeholder="lastName"></label><br>
                    FullName: {{fullName1}}
                </fieldset>
            </div>
            <h6>computed 的 getter 和 setter</h6>
            <label>FirstName: <input type="text" v-model="firstName2" placeholder="firstName"></label><br>
            <label>LastName: <input type="text" v-model="lastName2" placeholder="lastName"></label><br>
            <input type="text" v-model="fullName2">
            <h6>watch 的使用场景</h6>
            在还有 异步操作 或 代价奥贵的操作 时使用
        </div>
        <script type="text/javascript" src="compute-watch.js"></script>
    </body>
</html>